<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">课程查询</text>
		</view>
    
    <!-- 卡片视图 -->
    <view class="List">
      <!-- 课程 -->
      <view class="kecheng">
        <text>|</text>
        <text>钢琴</text>
      </view>
      <!-- 学员 -->
      <view class="xueyuan">
        <text>学员姓名:</text>
        <text>袁大宝</text>
      </view>
      <!-- 课时 -->
      <view class="keshi">
        <view class="">
          <text>总课时:</text>
          <text>50</text>
        </view>
        <view class="">
          <text>已完成课时:</text>
          <text>50</text>
        </view>
       <view class="">
         <text>剩余课时:</text>
         <text>50</text>
       </view>
      </view>
      <!-- 班级 -->
      <view class="banji">
        <view class="banji1">
          <text>初级钢琴版</text>
          <text>小p老师</text>
        </view>
        <view class="btn">
          <button type="default">查看打卡记录</button>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
/* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
 background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 222rpx;
}
/* 卡片视图 */
.List {
  width: 750rpx;
  height: 599rpx;
  background: url(img/kecheng.png) no-repeat;
  background-size: cover;
   padding-left: 70rpx;
  }
  .kecheng {
   position: relative;
   top: 71rpx;
  }
   .kecheng text:nth-child(1){
     width: 5rpx;
     height: 10rpx;
     background: #8DCE2A;
     color: #8DCE2A;
     border-radius: 3rpx;
     margin-right: 20rpx;

   }
  .kecheng text:nth-child(2) {
    
    width: 70rpx;
    height: 34rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 30rpx;

  }
  
  .xueyuan {
    position: relative;
    top: 140rpx;
  }
  .xueyuan text:nth-child(1){
    width: 117rpx;
    height: 27rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 30rpx;

  }
  .xueyuan text:nth-child(2) {
    width: 81rpx;
    height: 27rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #777777;
    line-height: 30rpx;
    padding-left: 23rpx;

  }
  .keshi {
    display: flex;
    
    position: relative;
    top: 200rpx;
  }
  .keshi view text:nth-child(1){
    width: 77rpx;
    height: 23rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 30rpx;

  }
  .keshi view {
    margin-right: 50rpx;
  }
  .keshi view text:nth-child(2) {
    width: 27rpx;
    height: 19rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #EA3131;
    line-height: 30rpx;
    padding-left: 19rpx;
    

  }
  .banji {
    display: flex;
    position: relative;
    top: 270rpx;
  }
  .banji1 {
    display: flex;
    flex-direction: column;
  }
  .banji1 text:nth-child(1){
    width: 162rpx;
    height: 30rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 30rpx;
  }
  .banji1 text:nth-child(2){
    width: 120rpx;
    height: 26rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #777777;
    line-height: 30rpx;
    padding-top: 40rpx;
    box-sizing: border-box;

  }
  .btn button {
    width: 228rpx;
    height: 68rpx;
    border: 1px solid #8DCE2A;
    border-radius: 34rpx;
    background-color: #FFFFFF;
    font-size: 24rpx;
    color: #8DCE2A;
    margin-left: 162rpx;
    margin-top: 24rpx;

  }
</style>
